<template>
  <van-search v-model="value" show-action shape="round" placeholder="123" @update:model-value="onUpdate"
    @clear="onclear">
    <template #action>
      <div @click="router.go(-1)">取消</div>
    </template>
  </van-search>
  <div v-if="!mask">
    <div class="HistoricalSearch">
      <h3>历史搜索</h3>
      <van-icon v-if="!del" @click="del = !del" class="del" name="delete-o" />
      <span class="del" style="font-size: 12px" v-else><span @click="onDelAll">全部删除</span>&ensp;|&ensp;<span
          @click="del = !del">完成</span>
      </span>
      <div>
        <van-tag @click="selectItem(item)" @close="onClose(index)" :closeable="del" v-for="item, index in closeList1"
          :show="true" size="medium" type="primary">
          {{ item }}
        </van-tag>
      </div>
    </div>
    <div class="hotSearch">
      <h3>热门搜索</h3>
      <van-tag @click="selectItem(item)"  v-for="item, index in hotList"
          :show="true" size="medium" type="primary">
          {{ item }}
        </van-tag>
    </div>
  </div>
  <van-overlay z-index="100" class-name="mask" :show="show" @click.stop="aa">
    <van-cell-group>
      <van-cell @click="vanTitle(item.title)" v-for="item in list" icon="search">{{ item.title }}</van-cell>
    </van-cell-group>
  </van-overlay>

  <div v-if="mask">
    <van-tabs v-model:active="active">
      <van-tab title="医生">
        <Suspense>
          <template v-slot:default>
            <comDoc :list="docList" />
          </template>
          <template v-slot:fallback>
            <p style="text-align: center;font-size: 12px;color: #999999;">加载中...</p>
          </template>
        </Suspense>

      </van-tab>
      <van-tab title="疾病">
        <Suspense>
          <template v-slot:default>
            <comDisease v-if="diseaseList.length != 0" :list="diseaseList" />
          </template>
          <template v-slot:fallback>
            <p style="text-align: center;font-size: 12px;color: #999999;">加载中...</p>
          </template>
        </Suspense>
      </van-tab>
      <van-tab title="科普">
        <Suspense>
          <template v-slot:default>
            <homeList v-if="knowledgeList.length != 0" :list="knowledgeList" />
          </template>
          <template v-slot:fallback>
            <p style="text-align: center;font-size: 12px;color: #999999;">加载中...</p>
          </template>
        </Suspense>
      </van-tab>
    </van-tabs>
  </div>


</template>

<script setup lang="ts">
import { ref, watch, defineAsyncComponent ,onMounted} from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const active = ref(0);
import { getsearchAPI } from '@/api/select'
const value = ref<string>('');
const show = ref(false);
const mask = ref(false);
const list = ref<any>([])

// 热门搜索
let hotList=ref([])
import {getsearchHotAPI} from '@/api/select'
onMounted( async()=>{
 const res=  await getsearchHotAPI()
 hotList.value=res.data.data
 console.log( hotList.value);

})

// 搜索框输入时触发
const onUpdate = async (val: any) => {
  show.value = true
  console.log(show.value);
  const res = await getsearchAPI(val)
  list.value = res.data.data

}

const onclear = () => {
  show.value = true
  mask.value = true
}
import { getsearchTypeAPI } from '@/api/select'
import type { rowss } from '@/types/types';

// 点击弹窗里的数据
let closeList = ref<string[]>(JSON.parse(localStorage.getItem('closeList')!) || [])
function vanTitle(val: any) {
  value.value = val
  mask.value = true
  closeList.value.push(value.value)
  localStorage.setItem('closeList', JSON.stringify(closeList.value))
  onDoc()
}

let closeList1 = ref(JSON.parse(localStorage.getItem('closeList')!))

// 医生
let doc = ref(false)
let docList = ref<rowss[]>([])

const comDoc = defineAsyncComponent(() => import('@/components/common/com-doc/com-dec.vue'))
const onDoc = async () => {
  const res = await getsearchTypeAPI(1, 10, value.value, 'doc')
  docList.value = res.data.data.rows.doc
  doc.value = true
}

// 疾病
const comDisease = defineAsyncComponent(() => import('@/components/common/com-disease/com-disease.vue'))
let disease = ref(false)
let diseaseList = ref<rowss[]>([])
const onDisease = async () => {
  const res = await getsearchTypeAPI(1, 10, value.value, 'disease')
  diseaseList.value = res.data.data
  console.log(diseaseList.value);

  disease.value = true
}

// 科普knowledge
const homeList = defineAsyncComponent(() => import('@/components/common/com-homeList/com-homeList.vue'))
let knowledge = ref(false)
let knowledgeList = ref<rowss[]>([])
const onKnowledge = async () => {
  console.log(5555);

  const res = await getsearchTypeAPI(1, 10, value.value, 'knowledge')
  knowledgeList.value = res.data.data.
    rows.knowledge

  console.log(knowledgeList.value, 1222);

  knowledge.value = true
}



watch(() => active.value, () => {
  if (active.value == 0) {
    if (doc.value) return
    onDoc()
  }
  if (active.value == 1) {
    if (disease.value) return
    onDisease()
  }
  if (active.value == 2) {
    if (knowledge.value) return
    onKnowledge()
  }
},)

// 历史搜索

function aa() {
  console.log(show.value);
  show.value = false

}

// 删除
const del = ref(false)

// 删除单个数据
function onClose(ev: any) {
  closeList1.value.splice(ev, 1)
  localStorage.setItem('closeList', JSON.stringify(closeList1.value));
}
// 全部删除
function onDelAll() {
  window.localStorage.removeItem('closeList')
  location.reload()
}

function selectItem(item: string) {
  value.value = item
  mask.value = true
  onDoc()
}
</script>

<style scoped lang="scss">
.van-tag {
  margin: 5px;
  padding: 5px 15px;
  border-radius: 25px;
  background-color: #fafafa;
  color: black;
}

::v-deep .van-cell__value {
  min-width: 80%; //可根据自己需求设定值
  text-align: left !important;
}

::v-deep .van-tabs__line {
  background-color: #16C2A3 !important;
}
.hotSearch{
  width: 100%;
  padding: 0 10px;
  margin-top: 30px;
}

.HistoricalSearch {
  padding: 0 10px;


  h3 {
    display: inline-block;
  }

  .del {
    float: right;
    margin-top: 18px;
    font-size: 18px;
    color: #ADADAD;
  }
}

.mask {
  width: 100%;
  height: 92vh;
  margin-top: 8vh;
  background-color: #adadad61;
}
</style>
